<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      订单管理
    </div>
    <div style="margin-left: 400PX">
      <el-select v-model="state" placeholder="订单状态"
                 style="width: 200px;margin-left: 40px" clearable>
        <el-option
          v-for="item in stateList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="abrogateIdentity" placeholder="作废状态"
                 style="width: 200px;margin-left: 40px" clearable
      >
        <el-option
          v-for="item in abrogateIdentityList"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="liveId" placeholder="订单ID"
                style="width: 200px;margin-left: 40px" clearable
      />
      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px"
      >查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="selectList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="liveId" sortable label="订单ID"/>
        <el-table-column align="center" fixed prop="customerName" sortable label="顾客"/>
        <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
        <el-table-column align="center" fixed prop="roomTypeName" sortable label="房间类型"/>
        <el-table-column align="center" fixed prop="roomPrice" sortable label="房间价格"/>
        <el-table-column align="center" fixed prop="liveTime" sortable label="入住时间"/>
        <el-table-column align="center" fixed prop="cancelTime" sortable label="退房时间"/>
        <el-table-column align="center" fixed prop="state" label="房间状态">
          <template v-slot="scope">
            <div :style="{ color: scope.row.state === '已退房' ? 'green' : 'red' }">
              {{ scope.row.state }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed prop="liveAmount" sortable label="订单金额"/>
        <el-table-column align="center" fixed prop="collectionIdentity" label="收款标识">
          <template v-slot="scope">
            <div :style="{ color: scope.row.collectionIdentity === '已收款' ? 'green' : 'red' }">
              {{ scope.row.collectionIdentity }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
        <el-table-column align="center" fixed prop="abrogateIdentity" sortable label="作废标识"/>
        <el-table-column align="center" fixed="right" label="操作">
          <template v-slot="scope">
            <!--传入的scope.row参数为当前行的数据-->
            <el-button v-if="scope.row.cancelTime != null &&  scope.row.liveAmount == null" @click="settlementButton(scope.row)" type="text"
                       size="small"
            >结算
            </el-button>
            <el-button v-if="scope.row.liveAmount != null && scope.row.collectionIdentity != '已收款'" @click="collectionButton(scope.row)" type="text"
                       size="small"
            >确认收款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>


      <el-dialog title="结算订单" width="40%" :visible.sync="settlementButtonController">
        <div style="margin: 10px">
          <H1>请确认是否结算订单</H1>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="settlementLive">确定</el-button>
        <el-button @click="settlementButtonController = false">取消</el-button>
      </span>
      </el-dialog>

      <el-dialog title="确认收款" width="40%" :visible.sync="collectionButtonController">
        <div style="margin: 10px">
          <H1>请确认是否收款</H1>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="collectionLive">确定</el-button>
        <el-button @click="collectionButtonController = false">取消</el-button>
      </span>
      </el-dialog>

    </div>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'
import { collectionLive, selectAllLive, settlementLive } from '@/api/live'

export default {
  name: 'live',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      abrogateIdentityList: [
        { label: '已作废', value: '已作废' },
        { label: '未作废', value: '未作废' }
      ],
      abrogateIdentity: '',
      liveId: '',
      selectList: [],
      stateList: [
        {label: '已退房', value: '已退房'},
        {label: '入住中', value: '入住中'}
      ],
      state: '',
      liveIds: '',
      liveTableId: '',
      settlementButtonController: false,
      collectionButtonController: false,
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    selectAll() {
      selectAllLive({
        state: this.state,
        abrogateIdentity: this.abrogateIdentity,
        liveId: this.liveId,
      }).then(
        response => {
          this.selectList = response.data
        }
      )
    },
    check() {
      this.abrogateIdentity = ''
      this.liveId = ''
      this.selectAll()
    },
    settlementButton(row) {
      this.liveIds = row.liveId
      this.liveTableId = row.liveTableId
      this.settlementButtonController = true
    },
    collectionButton(row) {
      this.liveIds = row.liveId
      this.liveTableId = row.liveTableId
      this.collectionButtonController = true
    },
    settlementLive() {
      settlementLive({
        liveId: this.liveIds,
        liveTableId: this.liveTableId
      }).then(
        async response => {
          this.selectAll()
          this.settlementButtonController = false
        }
      )
    },
    collectionLive() {
      collectionLive({
        liveId: this.liveIds,
        liveTableId: this.liveTableId
      }).then(
        async response => {
          this.selectAll()
          this.collectionButtonController = false
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
